const TrainTemplate = `
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>培训报考信息</span>
    </div>
    <div>
    <el-form ref="form" :disabled="isDisable" label-suffix=":" :model="formData" :rules="rules" label-width="117px" size="small">
      <el-row>
      <el-col :span="8">
        <el-form-item prop="applyProject" label="报考项目">
        <el-select v-model="formData.applyProject" placeholder="请选择" @change="handleTrainChange">
          <el-option v-for="item in trainList" :key="item.id" :label="item.trainName" :value="item.trainName"></el-option>
        </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item  prop="examCourse" label="考试科目">
        <el-select multiple v-model="formData.examCourse" placeholder="请选择">
          <el-option v-for="item in trainInfoList" :key="item.id" :label="item.trainInfoName" :value="item.trainInfoName"></el-option>
        </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item  prop="classs" label="班次">
        <el-select v-model="formData.classs" placeholder="请选择">
          <el-option v-for="item in classList" :key="item.id" :label="item.classs" :value="item.classs"></el-option>
        </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item  prop="batch" label="批次">
        <el-select v-model="formData.batch" placeholder="请选择">
          <el-option v-for="item in batchList" :key="item.id" :label="item.batch" :value="item.batch"></el-option>
        </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item  prop="applyAssist" label="报考类型">
        <el-select v-model="formData.applyAssist" placeholder="请选择">
          <el-option label="报考" value="报考"></el-option>
          <el-option label="培训" value="培训"></el-option>
          <el-option label="培训加报考" value="培训加报考"></el-option>
        </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item  prop="startDate" label="开始时间">
          <el-date-picker
            style="width: 100%;"
            value-format="yyyy-MM-dd"
            v-model="formData.startDate"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item  prop="endDate" label="结束时间">
          <el-date-picker
            style="width: 100%;"
            value-format="yyyy-MM-dd"
            v-model="formData.endDate"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
      </el-col>
      </el-row>
    </el-form>
    </div>
  </el-card>
`;

Vue.component("app-train", {
  props: ["level-list", 'type'],
  name: "app-train",
  template: TrainTemplate,
  mounted() {
    this.getList();
  },
  data() {
    return {
      rules: {
        applyProject: [
          {
            required: true,
            message: '请选择报考项目',
          }
        ],
        examCourse: [
          {
            required: true,
            message: '请选择学历层次',
          }
        ],
        classs: [
          {
            required: true,
            message: '请选择班次',
          }
        ],
        applyAssist: [
          {
            required: true,
            message: '请选择报考类型',
          }
        ],
        batch: [
          {
            required: true,
            message: '请选择批次',
          }
        ],
      },
      trainList: [],
      trainInfoList: [],
      classList: [],
      batchList: [],
      formData: {
        applyProject: '',
        examCourse: [],
        classs: '',
        applyAssist: '',
        startDate: '',
        endDate: '',
        batch: "",
      },
    };
  },
  watch: {
    formData: {
      handler: function ({ applyProject = '' }) {
        this.handleTrainChange(applyProject);
      },
      deep: true,
    },
  },
  computed: {
    isDisable() {
      return this.type === 'look';
    },
  },
  methods: {
    handleTrainChange(value) {
      // this.formData.pathLabel = this.modeList.find(item => item.id === value).mode;
      const id = this.trainList.find(item => item.trainName === value).id;
      $.ajax({
        url: baseUrl + "education/queryTrainInfoList",
        method: "Post",
        data: {
          trainId: id,
        },
        success: (data) => {
          this.trainInfoList = data;
        },
      });
    },
    getList() {
      $.ajax({
        url: baseUrl + "education/queryTrainList",
        async: false,
        method: "Post",
        headers: {
          Authorization: JSON.parse(localStorage.getItem("userInfo")).token,
        },
        success: (data) => {
          this.trainList = data;
          console.log(`this.formData`, this.formData);
        },
      });
      $.ajax({
        url: baseUrl + "education/queryClasssList",
        async: false,
        method: "Post",
        headers: {
          Authorization: JSON.parse(localStorage.getItem("userInfo")).token,
        },
        success: (data) => {
          this.classList = data;
        },
      });
      $.ajax({
        url: baseUrl + "education/queryBatchList",
        async: false,
        method: "Post",
        data: {
          trainType: 'train',
        },
        headers: {
          Authorization: JSON.parse(localStorage.getItem("userInfo")).token,
        },
        success: (data) => {
          this.batchList = data;
        },
      });
    },
  },
});
